<template>
    <div>
        <div style="height:5px;background-color: #eeeeee;"></div>
        <el-card>
            <div slot="header" class="list-card-header">
                <span>{{title}}</span>
                <el-button v-if="showMore" class="list-card-more" type="text" size="default">查看全部</el-button>
            </div>
            <div v-if="!data.length" class="no-data">【列表模块】请点击关联数据</div>
            <el-row v-else :gutter="20">
                <el-col v-for="(item,index) in data" :key="index"  :style="listType == 'one' ? 'display: flex;' : ''" :span="listType==='one'?24:12" :offset="0" style="margin-bottom:10px;">
                    <img :src="item.cover"
                        style="width:130px;margin-right: 10px;" alt="">
                    <div :style="listType == 'one' ? 'width:50%;' : 'width:100%;'"  >
                        <div class="list-title">{{item.title}}</div>
                        <div class="list-desc">{{item.try}}</div>
                        <div class="list-price">
                            <span>￥{{item.price}}</span>
                            <span>￥{{item.t_price}}</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script>
    export default {
        name: 'list',
        props: {
            title: {
                type: String,
                default: ""
            },
            showMore: {
                type: Boolean,
                default: true
            },
            data: Array,
            listType: {
                type: String,
                default: "one"
            },
        },
        data() {
            return {

            };
        },
        mounted() {

        },
        methods: {

        },
    };
</script>
<style scoped>
    .no-data{
        border:1px solid #cccccc;
        background-color:#eeeeee;
        color:#ccc;
        display: flex;
        align-items:center;
        justify-content:center;
        padding:15px 0;
    }
    .list-card-header {
        border-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .list-card-more {
        float: right;
        padding: 0;
        color: #999999;
    }

    /* .list-title {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 5px 0;
    }

    .list-desc {
        font-size: 12px;
        color: #999999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 5px 0;
    } */

    .list-title {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 5px 0;
    }
    
    .list-desc {
        font-size: 12px;
        color: #999999;
        margin: 5px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list-price {
        display: flex;
        align-items: flex-end;
    }

    .list-price span:first-child {
        color: red;
    }

    .list-price span:last-child {
        color: #888888;
        margin-left: 5px;
        font-size: 10px;
    }
</style>